<template>
  <div>
    <!--添加根节点-->
    <el-dialog title="添加班级" :visible.sync="rootVisible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="rootClasseName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rootSave()">保存</el-button>
          <el-button @click="rootVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--编辑节点-->
    <el-dialog title="编辑节点" :visible.sync="editVisible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="editClasseName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editSave()">保存</el-button>
          <el-button @click="editVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--大纲管理内容-->
    <el-card v-loading="loading" shadow="never">
      <div slot="header">班级管理
        <el-button type="primary" size="mini" @click="addRoot()">添加班级</el-button>
      </div>
      <el-tree :data="classes" :props="{label:'class_name'}">
        <div
          class="yangshi"
          @mousemove="showOpt=data.id"
          @mouseout="showOpt=''"
          slot-scope="{data}"
        >
          <div>{{data.class_name}}</div>
          <div v-show="showOpt==data.id">
            <el-button type="primary" size="mini" @click.stop="edit(data)">编辑</el-button>
            <el-button type="danger" size="mini" @click.stop="del(data.id)">删除</el-button>
          </div>
        </div>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOpt: "",
      icons: [
        "el-icon-info",
        "el-icon-error",
        "el-icon-tickets",
        "el-icon-goods",
        "el-icon-service"
      ],
      loading: false,
      rootClasseName: "",
      rootVisible: false,
      editVisible: false,
      editId: "",
      editClasseName: "",
      classes: []
    };
  },
  created() {
    this.getClasses();
  },
  methods: {
    edit(data) {
      this.editId = data.id;
      this.editClasseName = data.class_name;
      this.editVisible = true;
    },
    del(id) {
      this.$confirm("删除", "提示", "删除")
        .then(() => {
          this.axios.delete(`/classes/del/${id}`).then(() => {
            this.getClasses();
            this.$root.$emit("updateClasses");
          });
        })
        .catch(() => {});
    },
    addRoot() {
      this.rootVisible = true;
    },
    editSave() {
      this.axios
        .put(`/classes/edit/${this.editId}`, {
          class_name: this.editClasseName
        })
        .then(ret => {
          this.getClasses();
          this.editVisible = false;
        });
    },
    rootSave() {
      this.axios
        .post("/classes/add", {
          class_name: this.rootClasseName,
          parent_id: 0
        })
        .then(ret => {
          this.getClasses();
          this.rootVisible = false;
        });
    },
    getClasses() {
      this.loading = true;
      this.axios.get("/classes").then(ret => {
        this.loading = false;
        const { data } = ret.data;
        this.classes = data.rows;
        this.total = data.total;
      });
    }
  }
};
</script>

<style>
.el-tree-node__content {
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 5px 0px;
  padding: 10px 0;
}
.yangshi {
  display: flex;
  width: 100%;
  height: 25px;
  justify-content: space-between;
}
</style>
